/* ====================================================== 
   Maintain Aspect Ratio List
/* ====================================================== */
.list-maintain-aspect-ratio {
	
	padding: 0 3rem;
	
	.content {
		padding: 3rem;
	}
	
	.item {
		display: block;
		@include transition-default();
		background: #212121;
		
		
		/* Maintain Aspect Ratio 1:1*/
		width: 100%;
		padding-top: 100%; /* 1:1 Aspect Ratio */
		position: relative; /* If you want text inside of it */

		img,
		i,
		.disable {
			@include transition-default();
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 1;
			opacity: 0;
			width: 5rem;
			height: auto;
			transform: translate(-50%,-50%);
			font-size: 5rem;
			color: rgba(255,255,255,1);
		}
		
		.disable {
			opacity: 1;
			z-index: 2;
			color: rgba(255,255,255,.3);
		}
		

		
		&:hover {
			background: $highlight-color1;
			
			img,
			i {
				opacity: 1;
			}
			
			.disable {
				opacity: 0;
			}	
			
		}
	}
}


@media all and (max-width: 768px) {
	.list-maintain-aspect-ratio {

		padding: 0;
		
		.item {
			
			img,
			i,
			.disable {
				width: 2.5rem;
				font-size: 2.5rem;
			}	
		}
		
		.seamless-col-1-3 {
			width: 33.333333333333%;
			float: left;
		}
		
		.content {
			padding: .5rem;
		}

	}

	
}